<template>
	<view class="distributionDetails flex-column">
        
		<view class="flex-between margin_20rpx_0 margin-left_20rpx" >
			<view class="selectTime flex-align-center">
			
				<view class="tab " v-for="(item, index) in orderStatusArr" :key="index">
					<view :class="[currentIndex == index ? 'active ' : ''] " @click="switchTimeTab(index)">
						{{ item.value }}
					</view>
				</view>
			</view>
			<!-- <view class="month">
				<picker mode="date" :value="date" :fields="currentTimeFn(currentTime)" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="flex-align-center-justify-start  color6">
						{{ yeartime }}
						<text>-</text>
						{{ monthtime }}
						<uni-icons type="right" color='#333' size="16"></uni-icons>
					
					</view>

				</picker>
			</view> -->
		</view>
		<view class="cardDetail flex-column-between" v-if="userType==1">
			<view class="font-weight_bold">
				{{'当前收益('+currency_name+')'}}
			</view>
			<view class="flex-between" v-if="userInfoObject">
				<view style="color: #1E6CEB;;font-size: 54rpx;;" class="">
					{{userInfoObject.surplus_income}}
				</view>
				<view class="recharge flex" @click="withdrawal()">
					提现
				</view>
			</view>
		
		</view>
		<!-- 明细列表 -->
		
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="detailedList" @click="distributionDetailsFn(item)">
					<view class="flex-between margin-bottom_20rpx">
						<view class="flex">
							<view class="font-weight_bold">
									{{item.pay_mode==1||item.pay_mode==3?'微信提现':'支付宝提现'}}{{item.pay_mode==1?'(公众号提现)': item.pay_mode==3?'(小程序提现)':''}}
							</view>
							<view :class="[item.status==1||item.status==2 ? 'gayBtn' :item.status==3?'greenBtn':'redBtn' ]" class="gayBtn flex" >
								{{orderStatusFn(item.status)}}
							</view>
						</view>
						<view style="color: rgb(49, 169, 82);" class="font-weight_bold">
							￥{{item.amount}}
						</view>
					</view>
					<view class="flex-between padding-bottom_20rpx border-bottom-ECECEC"
						style="color: rgb(117, 117, 117);;">
						<view class="">
							<text>{{item.create_time}}</text>
						</view>
						<view class="">
							<text>{{'手续费('+currency_name+')'}}{{item.fees_ratio}}%，{{item.fees}}</text>
						</view>
					</view>
					<view class="flex-between">
						<view class="padding-top_20rpx">
							<text style="color: rgb(117, 117, 117);">订单：{{item.sn_order}}</text>
						</view>
						
					</view>
					<view class="padding-top_20rpx">
						<text style="color: rgb(117, 117, 117);">{{'提现收益('+currency_name+')'}}：{{item.number}}</text>
					</view>
					<view class="padding-top_20rpx" v-if="item.status==4">
						<text  style="color: rgb(255, 0, 0);">失败原因：{{item.remark}}</text>
					</view>
				</view>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
	// 
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				currency_name: uni.getStorageSync("system").currency_name,
				userInfos: uni.getStorageSync("userInfo"),
				associateGetInfo: uni.getStorageSync("associateGetInfo"),
				promoterGetInfo: uni.getStorageSync("promoterGetInfo"),
				
				date: null,
				tabIndex: 4,
				currentTime: '2',
				navIndex: 0,
				searchVal: '',
				orderStatusArr: [{
						value: '全部'
					},
					{
						value: '微信'
					},
					{
						value: '支付宝'
					},
					
				],
				currentIndex:0,
				tab:0,
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				userType:'1',
				userInfoObject:null

			}
		},
		onLoad(options) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				},

			});
			if(options.type){
				console.log(options.type)
				this.userType=options.type
			}
			this.userInfoFn()
		},
		onShow() {
			this.mescroll?.resetUpScroll();
			this.userInfoFn()

		},
		
		methods: {
			withdrawal() {
				
				 
				// 是需要去提现还是把收益转为余额
				
				this.$sun.navGo('/pagesA/personalCenter/applyWithdrawal')
			
				// this.$sun.navGo('/pagesA/personalCenter/brickStoneRevenue')
			},
			async userInfoFn() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {
			
			
			
			
					},
					headers: {
						'Authorization': this.userInfos.token
					}
			
				})
			
				if (result.code == 0) {
					console.log('data', result.data);
					wx.setStorageSync('userInfo', result.data);
					this.userInfoObject = result.data
			
					
			
				}
			},
			switchTimeTab(index) {
			
				if(index==1){
					this.currentIndex = index;
					this.tab=1
					
				}else{
					this.currentIndex = index;
					this.tab=index
				}
				
				this.mescroll?.resetUpScroll();
			
			},
			distributionDetailsFn(item){
				console.log(item.id)
				this.$sun.navGo('/pagesA/personalCenter/distributionviewDetails',{id:item.id})
			},
			async upCallback(scroll) {
                let recordApi=this.userType==1?this.$api.withdrawalList:this.userType==2?this.$api.associateWithdrawalList:this.$api.promoterWithdrawalList
				const result = await this.$http.post({
					url: recordApi,
					data: {
						page: scroll.num,
						limit: 10,
						pay_mode:this.tab,
						aid:this.userType==1?'':this.userType==2?this.associateGetInfo.id:'',
						pid:this.userType==1?'':this.userType==3?this.promoterGetInfo.id:''


					},
					headers: {
						'Authorization': this.userInfos.token
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.count = result.data.count
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

			bindDateChange(e) {


				this.createTime = e.detail.value
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];


			},

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			},
			// 订单状态
			orderStatusFn: function() {
				return function(status) {
					
					let orderStatus = '';
					// status订单状态（1 待打款 2 打款中 3 已 完成 4 驳回',)
					orderStatus =
						status == 1 ? '待打款' : status == 2 ? '打款中' : status == 3 ? '已完成' :'驳回' ;
					return orderStatus;
				};
			},




		},
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
		padding: 30rpx;
	}

	.distributionDetails {
		.cardDetail {
			margin-top: 30rpx;
			width: 710rpx;
			margin-bottom: 20rpx;
			height: 230rpx;
			border-radius: 10rpx;
		
			background: rgb(255, 255, 255);
			padding: 30rpx 40rpx;
		
			.recharge {
				width: 152rpx;
				height: 68rpx;
				border-radius: 200rpx;
				color: rgb(255, 255, 255);
				background: #1E6CEB;
			}
		}
		.selectTime {
		
			margin-top: 20rpx;
		
			.tab {
		
				list-style-type: none;
				margin-right: 20rpx;
				display: block;
				width: 106rpx;
				height: 44rpx;
				line-height: 44rpx;
		
				border: 1px solid rgb(239, 239, 239);
				text-align: center;
				background: rgb(255, 255, 255);
				color: rgb(153, 153, 153);
				border-radius: 10rpx;
			}
		
			.active {
				border-radius: 10rpx;
				width: 106rpx;
				height: 44rpx;
		
		
		
				background: rgb(79, 97, 234);
				color: rgb(255, 255, 255);
				;
				text-align: center;
				line-height: 44rpx;
			}
		
			.orderStatus {
				width: 90px;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				font-weight: 700;
		
			}
		
		
		
		
		}
	

		.all {
			width: 102rpx;
			height: 46rpx;
			border-radius: 10rpx;
			color: rgb(255, 255, 255);
			background: rgb(255, 0, 0);
		}

		.detailedList {
			margin-top: 20rpx;
			width: 710rpx;

			border-radius: 10rpx;
			padding: 30rpx;
			background: rgb(255, 255, 255);
		}

		.greenBtn {
			width: 82rpx;
			height: 36rpx;
			margin-left: 15rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(40, 196, 69);
			border-radius: 8rpx;
			color: rgb(40, 196, 69);
			font-size: 24rpx;
			background: rgb(255, 255, 255);
		}

		.gayBtn {
			width: 82rpx;
			height: 36rpx;
			margin-left: 15rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(153, 153, 153);
			border-radius: 8rpx;
			color: rgb(153, 153, 153);
			font-size: 24rpx;
			background: rgb(255, 255, 255);
		}

		.redBtn {
			width: 82rpx;
			height: 36rpx;
			margin-left: 15rpx;
			color: rgb(255, 0, 0);
			box-sizing: border-box;
			border: 1px solid rgb(255, 0, 0);
			border-radius: 4px;
			font-size: 24rpx;
			background: rgb(255, 255, 255);
		}
	}
</style>